<template>
  <PageHeadFooter class="cal-color-slot" page="ralColor">
    <div class="crumbs">
      <div
        style="height: 100%"
        class="container flex-y-center font-18 color-fff"
      >
        <div
          style="height: 100%"
          class="m-x-40 flex-y-center font-18 color-fff"
        >
          <span @click="$router.push('/')" class="cspt m-r-4">HOME</span>
          <span class="m-r-4">>></span>
          <span class="m-r-4">RAL COLOR</span>
        </div>
      </div>
    </div>
    <div class="list container">
      <div class="item" v-for="(item, i) in data" :key="i">
        <div class="color" :style="{ backgroundColor: item.color }"></div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </PageHeadFooter>
</template>

<script>
import PageHeadFooter from "../index/components/page-head-footer.vue";
import { data } from "./res.js";
export default {
  components: {
    PageHeadFooter,
  },
  data() {
    return {
      data,
    };
  },
};
</script>

<style lang="scss" scoped>
.cal-color-slot {
  .crumbs {
    height: 60px;
    border-top: 2px;
    background: url("../detail/continer_img/crumbs-bg.jpg") repeat center center;
  }
  .list {
    padding: 20px 40px;
    margin: 0 auto;
    background: #ebebeb;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 20%;
      display: flex;
      margin-bottom: 20px;
      line-height: 80px;
      font-size: 12px;
      .color {
        width: 80px;
        height: 80px;
        margin-right: 20px;
      }
    }
  }
}

@media (min-width: 768px) {
  .container {
    width: 740px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 960px;
  }
}
@media (min-width: 1280px) {
  .container {
    width: 1200px;
  }
}
@media (min-width: 1600px) {
  .container {
    width: 1560px;
  }
}
@media (min-width: 1920px) {
  .container {
    width: 1800px;
  }
}
</style>
